/**
 * Spectropedia Styles
 */


/* - document styles ---------------------------------------------------- */
body {
  font-family : "Helvetica", sans-serif;
  font-weight : normal;
  text-align  : left;
  padding     : 0px;
  margin      : 3px;
}

div, span {
  text-align  : left;
  padding     : 0px;
  margin      : 0px;
}


/* - detail & overview containers --------------------------------------- */
.spectrum {
  position   : relative;
  overflow   : none; 
}
#detail {
  height     : 66%; 
  min-height : 400px; 
  background : #f0f0f0;
}
#overview {
  height     : 34%; 
  min-height : 200px;
  /*background : #aaa;*/
  background : #f0f0f0;
}
/*.window {
  position   : absolute;
  opacity    : 0.9;
  background : white;
  top        : 0px;
  height     : 100%;
}*/
.mask {
  position   : absolute;
  z-index    : 10;
  opacity    : 0.8;
  background : black;
  top        : 0px;
  height     : 100%;
}


/* - default class for skin bitmaps ------------------------------------- */
.skin {
  position : absolute;
  z-index  : 30;
}


/* - controls ----------------------------------------------------------- */
#details-control {
  position   : absolute;
  background : black;
  color      : white;
  opacity    : 0.8;
  width      : 318px;
  height     : 120px;
  right      : 0px;
  top        : 0px;
  padding    : 1.0em;
  z-index    : 20;
}
#details-control .title {
  display: inline;
  color: green;
  font-weight: bold;
  font-size: 1.25em;
  text-align: right;
  border: 0px solid white;
}
#details-control .frequency {
  display: inline;
  color: white;
  font-style: italic;
  font-size: 0.75em;
  text-align: right;
  border: 0px solid white;
}
#details-control .notes {
  border: 0px solid white;
  color: white;
  font-size: 0.9em;
  padding-top: 0.5em;
  text-align: justify;
}
#zoom-control {
  position : absolute;
  background: url(style/zoom-a.png);
  top: 0px;
  right: 6px;
  border: 0px solid red;
  width: 80px;
  height: 216px;
}


/* - holds the scale, assignments & allocations ------------------------- */
#overview-container, #detail-container {
  height : 100%;
  position: relative;
}


/* - scale graphics ----------------------------------------------------- */
.scale { 
  display       : inline-block;
  border-top    : 0px;
  border-bottom : 0px;
  border-left   : 0px;
  border-right  : 1px solid #c0c0c0;
  height        : 100%;
  position      : relative;
}
.scale .label {
  font-size   : 0.5em;
  text-align  : right;
  position    : absolute;
  right       : 0.5em;
  bottom      : 1.0em;
}


/* - container for the allocation & assignment band visual elements ----- */
/*.bands { position: relative; }*/
#overview-allocations, #detail-allocations {
  position : relative;
  height   : inherit;
/*border : 1px solid green;*/
}
#overview-assignments, #detail-assignments {
  position : relative;
  height   : inherit;
}


/* - the actual band elements ------------------------------------------- */
.allocation {
  position   : absolute;
  top        : 0px;
  height     : 100%;
  border: 1px solid black;
  background-image : url(crosshatch-red.jpg);
  background-position : bottom right;
}
.allocation .label {
  font-family : "Monaco", "Courier New", "Courier", "fixed";
  border : 0px solid red;
  margin: 1px;
  padding-bottom: 0px;
  position: absolute;
  /*bottom: -14px;*/
  /*left : -1.3em;
  height : 1.2em;*/
  left : -16px;
  height : 15px;
  top: 100%; /* Rotating label ends up creating 14px i.e 1 line's height increase because of transform weirdness */
  font-size     : 0.75em;
  text-overflow : ellipsis;
  white-space   : nowrap;
  overflow      : hidden; 
  font-weight   : normal;
  /*background    : rgba(0,0,0,0.8);*/
  background    : rgba(32,32,32,1.0);
  color         : white;
  z-index       : 12;
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotate(-90deg); 
  -moz-transform-origin: 0% 0%;
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}
/*.allocation .label {
  position      : absolute;
  text-align    : right;
  text-overflow : ellipsis;
  white-space   : nowrap;
  overflow      : hidden; 
  width         : 80%;
  top           : 0.5em;
  right         : 0.25em;
  font-weight   : bold;
  border        : 0px solid red;
  color         : black;
  z-index       : 11;
}*/
.availability {
  background-image : url(crosshatch-blue.jpg);
  background-position : bottom right;
}


.assignments {
  position:absolute;
  top: 100%;
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotate(-90deg); 
  -moz-transform-origin: 0% 0%;
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

.assignment-frequency {
  /*border: 1px solid #556c8c;*/
  border: 1px solid gray;
  position   : absolute;
  top: 100%; 
  line-height: 2.0em;
  padding-left : 1.0em;
  font-style: normal;
  font-size  : 0.75em;
  color      : black;
  text-overflow : ellipsis;
  white-space   : nowrap;
  overflow      : hidden; 
  z-index    : 10;
  background-image : url(crosshatch.jpg);
  background-position : bottom right;

  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotate(-90deg); 
  -moz-transform-origin: 0% 0%;
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}


.assignment-channel {
  /*border: 1px solid #556c8c;*/
  border: 1px solid gray;
  display: inline-block;
  font-style: normal;
  font-size  : 0.75em;
  color      : black;
  text-overflow : ellipsis;
  white-space   : nowrap;
  overflow      : hidden; 
  z-index    : 10;
  background-image : url(crosshatch.jpg);
  background-position : bottom right;
  padding: 0.25em;
  margin: 0.25em;
  margin-left: 0px;
  margin-bottom: 0px;
}